import React, { useEffect, useState, useRef } from 'react';
import { Menu, Row, Col, Card, Button, Empty } from 'antd';
import { connect } from 'umi';
import Tree from '../TreeList';
import RoleForm from './components/RoleForm';
import ModelList from './components/ModelList';
import './index.less';
const management = (props) => {
  const { dispatch } = props;
  useEffect(() => {
    fetchData(true);
  }, []);
  const [list, setList] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState(null);
  const [data, setData] = useState({});
  const [visible, setVisible] = useState(false);
  const [treeKey, setTreeKey] = useState([]);
  const [adminVisible, setAdminVisible] = useState(false);
  const { accessList = [], role = {}, adminInfoList = [] } = data;
  useEffect(() => {
    if (selectedKeys) {
      fetchDetails({ id: Number(selectedKeys) });
    } else {
      return;
    }
  }, [selectedKeys]);
  const fetchData = (flag) => {
    dispatch({
      type: 'system/fetchRole',
      callback: (e) => {
        const { selfRoleList = [], roleList = [] } = e;

        if (flag) {
          setSelectedKeys(roleList[0].id.toString());
        }
        setList(roleList.map((item) => {
          return {
            key: item.id,
            label: item.roleName,
          };
        }));
      },
    });
  };
  const fetchDetails = (payload) => {
    dispatch({
      type: 'system/fetchRoleDetail',
      payload: {
        action: 'update',
        ...payload,
      },
      callback: (e) => {
        const { role, accessList, roleList, adminInfoList } = e;
        const { accessIdList = [], subAccessIdList = [] } = role;
        setTreeKey(subAccessIdList);
        setData({ role, accessList, roleList, adminInfoList });
      },
    });
  };
  const fakeDelete = () => {
    const { id } = role;
    dispatch({
      type: 'system/fetchDeleteAuthRole',
      payload: { id },
      callback: (e) => {
        fetchData(true);
      },
    });
  };
  const { roleName, remark, roleSource } = role;

  return (
    <Row className="management_box">
      <Col span={5}>
        <Card
          title="角色"
          extra={
            <Button type="primary" onClick={() => setVisible({ show: true })}>
              添加角色
            </Button>
          }
        >
          <Menu
            onSelect={(e) => {
              setSelectedKeys(e.key);
            }}
            selectedKeys={selectedKeys}
            openKeys={['defaultRole', 'role']}
            mode="inline"
            items={list}
          ></Menu>
        </Card>
      </Col>
      <Col offset={1} span={18}>
        <Card
          title={roleName}
          extra={
            <>
              <Button
                type="link"
                onClick={() => {
                  setAdminVisible(true);
                }}
              >
                关联{adminInfoList.length}人
              </Button>
              <Button
                disabled={roleSource === 'default'}
                type="primary"
                style={{ marginLeft: 12 }}
                onClick={() => {
                  setVisible({ show: true, details: data, type: 'update' });
                }}
              >
                编辑
              </Button>
              <Button
                disabled={roleSource === 'default'}
                style={{ marginLeft: 12 }}
                danger
                onClick={() => {
                  fakeDelete();
                }}
              >
                删除
              </Button>
            </>
          }
        >
          <div
            style={{
              fontSize: 12,
              color: '#999999',
            }}
          >
            {!remark ? <Empty description={'该角色无任何描述'}></Empty> : remark}
          </div>
        </Card>
        <Card title={'功能权限'} style={{ marginTop: 12 }}>
          <Tree
            disabled
            // checkStrictly
            selectedKeys={treeKey}
            onCheck={(e) => setTreeKey(e)}
            list={accessList}
          ></Tree>
        </Card>
      </Col>
      <RoleForm
        handleCallback={() => {
          fetchData(true);
        }}
        visible={visible}
        onClose={() => setVisible(false)}
      ></RoleForm>
      <ModelList
        selectedKeys={selectedKeys}
        handleCallback={() => fetchDetails({ id: Number(selectedKeys) })}
        dispatch={dispatch}
        list={adminInfoList}
        visible={adminVisible}
        onClose={() => setAdminVisible(false)}
      ></ModelList>
    </Row>
  );
};

export default connect(({ system, loading }) => ({
  ...system,
  loading: loading.models.system,
}))(management);
